<template>
    <div class="flex flex-col text-white" v-if="forecasthWeatherData.length && searchWeatherData.length">
      <div class="p-2 text-center bg-weather-secondary">
        你正在预览{{searchWeatherData[0].city}}的天气信息
        <span v-if="!isCityExist(adcode)">，可以通过右上角的"+"号按钮保存起来</span>
      </div>
      <div class="container flex flex-col text-center mt-6 gap-4">
        <h1>当日气温是：{{ searchWeatherData[0].temperature }}摄氏度</h1>
        <h1>当日天气是：{{ searchWeatherData[0].weather }}</h1>
        <h1>当日风向是：{{ searchWeatherData[0].winddirection }}风</h1>
        <h1>当日风力是：{{ searchWeatherData[0].windpower }}级</h1>
      </div>
      <hr class="border-white border-opacity-10 mt-6" />
      <div class="container">
        <weather-chart :forecasthWeatherData="forecasthWeatherData"/>
      </div>
    </div>
    <h1 class="text-center text-white text-lg" v-else>天气信息加载中...</h1>
  <!-- </div> -->
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { onMounted, ref } from 'vue'
import { RouterLink, RouterView,useRoute} from 'vue-router'
import { getAllWeather, getWeather } from '@/api/index.js'
import { localStorageStore } from '../stores/localStroge.js'
const { cityName, cityAdcode,forecasthWeatherData,searchWeatherData} = storeToRefs(localStorageStore())
const { isCityExist,addCity,getTem,getWeatherData} = localStorageStore()
import { useMaskStore } from '../stores/maskControl.js'
const { toggleMask } = useMaskStore()

import weatherChart from '@/components/weatherChart.vue';

const route = useRoute()
// 从路由获取参数
const adcode = route.query.adcode
const city = route.params.cityName
const tem = ref('')

// // 定义数据
// const forecasthWeatherData = ref([])
// const searchWeatherData = ref([])

// // 获取数据
// const getWeatherData = async () => {
//   // 获取预报数据
//   const res1 = await getAllWeather(adcode)
//   forecasthWeatherData.value = res1.data.forecasts[0].casts
//   // 获取当天数据
//   const res2 = await getWeather(adcode)
//   searchWeatherData.value = res2.data.lives
//   // 用于添加城市温度
//   getTem(searchWeatherData.value[0].temperature)
//   console.log('1:',searchWeatherData.value, '2',forecasthWeatherData.value)
// }

// 页面加载完成后获取天气数据
onMounted(() => {
  getWeatherData(adcode)
})
</script>

<style scoped>
.chartcanvas {
  user-select: none;
}
</style>
